<template>
  <div class="app-container">
    <Head :flag="true" />
    <div class="tab">
      <span :class="tab ? 'active' : ''" @click="gtype">商品类型</span>
      <span :class="tab ? '' : 'active'" @click="area" v-if="tableData.Area"
        >大区</span
      >
    </div>
    <!-- 商品类型表格 -->
    <transition name="type-fade" >
      <div class="table" v-if="tab" key="type">
        <el-table
          :data="tableData.goodsType"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :header-cell-style="{ color: '#000000', fontSize: '15px' }"
        >
          <el-table-column type="selection" align="center"> </el-table-column>
          <el-table-column prop="name" label="商品类型" align="center">
          </el-table-column>
          <el-table-column
            prop="level"
            label="分级类别"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="mount" label="商品数量" align="center">
          </el-table-column>
          <el-table-column prop="moneyRate" label="佣金比例" align="center">
          </el-table-column>
          <el-table-column prop="" label="是否显示" align="center">
            <template slot-scope="scope">
              <el-switch
                :value="scope.row.is_show === 1 ? true : false"
                active-color="#13ce66"
                inactive-color="#DCE0E7"
                @change="change(scope.$index, scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序" align="center">
          </el-table-column>
          <el-table-column
            prop="does"
            label="操作"
            align="center"
            width="450px"
          >
            <template slot-scope="scope">
              <el-button
                size="medium"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="medium"
                type="danger"
                @click="handleDel(scope.$index, scope.row)"
                >删除</el-button
              >
              <el-button
                size="medium"
                type="success"
                @click="handleAdd(scope.$index, scope.row)"
                >新增下一级</el-button
              >
              <el-button
                size="medium"
                type="warning"
                @click="handleNext(scope.$index, scope.row)"
                v-if="scope.row.hasNext === 1"
                >查看下一级</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    <!-- 大区表格 -->
      <div class="table" v-else key="area">
        <el-table
          :data="tableData.Area"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :header-cell-style="{ color: '#000000', fontSize: '15px' }"
        >
          <el-table-column type="selection" align="center"> </el-table-column>
          <el-table-column prop="area_name" label="大区名称" align="center">
          </el-table-column>
          <el-table-column prop="level" label="分级类别" align="center">
          </el-table-column>
          <el-table-column prop="" label="是否显示" align="center">
            <template slot-scope="scope">
              <el-switch
                :value="scope.row.is_show === 1 ? true : false"
                active-color="#13ce66"
                inactive-color="#DCE0E7"
                @change="change(scope.$index, scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序" align="center">
          </el-table-column>
          <el-table-column
            prop="does"
            label="操作"
            width="500px"
            header-align="center"
          >
            <template slot-scope="scope">
              <el-button
                size="medium"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="medium"
                type="danger"
                @click="handleDel(scope.$index, scope.row)"
                >删除</el-button
              >
              <el-button
                size="medium"
                type="success"
                @click="handleAdd(scope.$index, scope.row)"
                >新增下一级</el-button
              >
              <el-button
                size="medium"
                type="warning"
                @click="handleNext(scope.$index, scope.row)"
                v-if="scope.row.hasNext === 1"
                >查看下一级</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </transition>

    <!-- 商品类型分页 -->
    <pagination
      v-if="tab"
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageIndex"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
    <!-- 大区分页 -->
    <pagination
      v-if="!tab"
      v-show="totalA > 0"
      :total="totalA"
      :page.sync="listQuery.pageIndex"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import Head from "@/components/type_header";
import pagination from "@/components/Pagination";
import { getNextType } from "@/api/news";
export default {
  components: {
    Head, //头部
    pagination, //分页
  },
  data() {
    return {
      tab: true, //切换
      listLoading: false,
      total: 0,
      totalA: 0,
      listQuery: {
        pageIndex: 1,
        pageSize: 10,
      },
      tableData: {},
      multipleSelection: [],
    };
  },
  created() {
    if (this.$route.params.id === undefined) {
      let id = localStorage.getItem("id");
      //请求二级数据
      getNextType({ id: id }).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data;
          this.total = res.data.goodsType.length;
          this.totalA = res.data.Area.length;
        }
      });
      console.log(id);
    } else {
      localStorage.setItem("id", this.$route.params.id);
      //请求二级数据
      getNextType({ id: this.$route.params.id }).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data;
          this.total = res.data.goodsType.length;
          this.totalA = res.data.Area.length;
        }
      });
    }
    //分页
    this.getList();
  },
  methods: {
    //切换类型,大区
    gtype() {
      this.tab = true;
    },
    area() {
      this.tab = false;
    },
    //分页
    getList(val) {
      console.log(val);
      this.listLoading = true;

      this.listLoading = false;
    },
    //开关
    change(index, val) {
      val.is_show = val.is_show === 1 ? 2 : 1;
      console.log(index, val);
    },
    //编辑
    handleEdit(index, val) {
      console.log(index, val);
      this.$router.push("/commodity_manager/typeEdit");
    },
    //删除
    handleDel(index, val) {
      console.log(index, val);
    },
    //新增下一级
    handleAdd(index, val) {
      console.log(index, val);
      this.$router.push("/commodity_manager/typeAdd");
    },
    //查看下一级
    handleNext(index, val) {
      let id = localStorage.getItem("id");
      this.$router.push({
        name: "commodity_typeLast",
        params: { id: id, aid: val.aid },
      });
    },
    //批量删除
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
  },
};
</script>

<style scoped lang="scss">
.tab {
  width: 100%;
  margin: 0 auto;
  margin-top: 30px;
  min-width: 1200px;
  span {
    font-size: 20px;
    margin-right: 15px;
    cursor: pointer;
    font-weight: 500;
    color: #606060;
  }
  .active {
    color: #55ca7d;
  }
}
.table {
  width: 100%;
  margin: 0 auto;
  margin-top: 10px;
  min-width: 1200px;
}
//类型过度动画
.type-fade-enter-active {
  transition: all 1s ease;
}
.type-fade-leave-active {
  transition: all 0s cubic-bezier(1, 0.5, 0.8, 1);
}
.type-fade-enter {
  transform: translateX(10px);
  opacity: 0;
}
</style>